<template>
  <div class="visitor-notVisited">
    <div class="search-group">
      <div class="input-wrap">
        <div class="label">选择时间:</div>
        <div class="input-item flex align-center">
          <a-date-picker
            :allowClear="false"
            v-model="dateValue"
            placeholder="请选择时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            @change="onDateChange"
            :disabled-date="disabledStartDate"
          />
          <a-time-picker
            format="HH"
            value-format="HH"
            :allowClear="false"
            v-model="timeValue"
            @change="onTimeChange"
            @openChange="onOpenChange"
            style="margin-left: 5px"
            :disabled-date="disabledStartTime"
          />
          <!-- show-time -->
          <!-- <a-time-picker v-model="value" format="HH" /> -->
        </div>
      </div>
      <div class="btn-wrap">
        <span style="position: relative">
          <a-button class="searchBtn" type="primary" @click="isShowPopover = true">筛选</a-button>
          <div class="popover" v-if="isShowPopover">
            <div class="search-group">
              <div class="input-wrap">
                <div class="label">选择参数:</div>
                <div class="input-item">
                  <a-select ref="select" allowClear v-model="field" placeholder="请选择参数">
                    <a-select-option value="thickSmoke">油烟数值</a-select-option>
                    <a-select-option value="particleHaze">颗粒度浓度</a-select-option>
                    <a-select-option value="nonMethane">非甲烷气体</a-select-option>
                  </a-select>
                </div>
              </div>

              <div class="input-wrap">
                <div class="label">大于:</div>
                <div class="input-item">
                  <a-input-number clearable v-model="minValue" placeholder="请输入阈值" />
                </div>
              </div>

              <div class="input-wrap">
                <div class="label">小于:</div>
                <div class="input-item">
                  <a-input-number clearable v-model="maxValue" placeholder="请输入阈值" />
                </div>
              </div>

              <div class="btn-group flex justify-around" style="margin-top: 0.1rem; padding: 0 0.2rem">
                <a-button
                  type="primary"
                  class="searchBtn"
                  @click="isShowPopover = false"
                  style="background: #deef35 !important"
                >
                  取消
                </a-button>
                <a-button class="searchBtn" @click="confimFilter()" type="primary">确定</a-button>
              </div>
            </div>
          </div>
        </span>
        <a-button class="searchBtn" @click="searchQuery(queryParam.startDate, queryParam.endDate)" type="primary">
          搜索
        </a-button>
        <a-button class="resetBtn" @click="resetFilter" type="primary">重置</a-button>
        <a-button @click="exportExcel('区域排名小时数据')" type="primary" class="exp">导出</a-button>
      </div>
    </div>

    <div>
      <a-table
        rowKey="id"
        class="tableList"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        @change="handleTableChange"
      ></a-table>
    </div>
  </div>
</template>
<script>
import { downFile } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
  name: 'visitor-notVisited',
  mixins: [JeecgListMixin],
  data() {
    return {
      url: {
        list: '/device/regular_data/find_regional_ranking_page?type=2',
        exportXlsUrl: '/device/regular_data/find_regional_ranking_export?type=2',
      },
      disableMixinCreated: true,
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 60,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '行政区',
          dataIndex: 'regionName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '设备数量',
          dataIndex: 'allDeviceCount',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '油烟浓度平均值(mg/m³)',
          dataIndex: 'thickSmoke',
          align: 'center',
          sorter: true,
          ellipsis: true,
        },
        {
          title: '颗粒物浓度平均值(mg/m³)',
          dataIndex: 'particleHaze',
          align: 'center',
          sorter: true,
          ellipsis: true,
        },
        {
          title: '非甲烷总烃浓度平均值(mg/m³)',
          dataIndex: 'nonMethane',
          align: 'center',
          sorter: true,
          ellipsis: true,
        },
      ],
      field: 'thickSmoke',
      maxValue: '',
      minValue: '',
      dateValue: '',
      timeValue: '',
      dateTime: '',
      isShowPopover: false,
    }
  },

  mounted() {
    this.getDefaultTime()
    this.searchQuery()
  },

  methods: {
    disabledStartDate(startValue) {
      return startValue.valueOf() > new Date().getTime()
    },

    disabledStartTime(startValue) {
      return startValue.valueOf() > new Date().getHours()
    },

    getDefaultTime() {
      const dateValue = this.$moment().format('YYYY-MM-DD')
      const timeValue = this.$moment().subtract(1, 'hours').format('HH')
      this.dateValue = dateValue
      this.timeValue = timeValue
      this.dateTime = dateValue + ' ' + timeValue
      this.setStartEndTime(this.dateTime)
    },

    confimFilter() {
      if (this.maxValue !== '' || this.minValue !== '') {
        this.queryParam.field = this.field
        this.queryParam.minValue = this.minValue
        this.queryParam.maxValue = this.maxValue
        this.searchQuery()
        this.isShowPopover = false
      } else {
        this.isShowPopover = false
      }
    },

    resetFilter() {
      this.field = 'thickSmoke'
      this.maxValue = ''
      this.minValue = ''

      this.queryParam.minValue = ''
      this.queryParam.maxValue = ''

      this.getDefaultTime()
      this.searchQuery()
    },

    getQueryParams() {
      //获取查询条件
      let sqp = {}
      if (this.superQueryParams) {
        sqp['superQueryParams'] = encodeURI(this.superQueryParams)
        sqp['superQueryMatchType'] = this.superQueryMatchType
      }
      if (this.isShowPopover) {
        var param = Object.assign(sqp, this.queryParam, this.filters)
      } else {
        var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters)
      }

      // param.field = this.getQueryField()
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize

      return param
    },

    onDateChange(value) {
      this.dateTime = value + ' ' + this.timeValue
      this.setStartEndTime(this.dateTime)
    },

    onTimeChange(value) {
      this.dateTime = this.dateValue + ' ' + value
      this.setStartEndTime(this.dateTime)
    },

    onOpenChange(a) {
      console.log(a)
    },

    setStartEndTime(value) {
      let startDate = this.$moment(value).startOf('hour').format('YYYY-MM-DD HH:mm:ss')
      this.queryParam.startDate = this.$moment(startDate).valueOf()

      let endDate = this.$moment(value).endOf('hour').format('YYYY-MM-DD HH:mm:ss')
      this.queryParam.endDate = this.$moment(endDate).valueOf()
    },

    exportExcel(fileName) {
      let params = {
        field: this.field,
        minValue: this.minValue,
        maxValue: this.maxValue,
        startDate: this.queryParam.startDate,
        endDate: this.queryParam.endDate,
        ...this.isorter,
      }
      this.handleExportXls(fileName, params)
    },

    handleExportXls(fileName, tempParams) {
      if (!fileName || typeof fileName != 'string') {
        fileName = '导出文件'
      }
      let param = this.getQueryParams()
      if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
        param['selections'] = this.selectedRowKeys.join(',')
      }
      param = { ...tempParams }
      console.log('导出参数', param)
      downFile(this.url.exportXlsUrl, param).then((data) => {
        if (!data) {
          this.$message.warning('文件下载失败')
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(
            new Blob([data], {
              type: 'application/vnd.ms-excel',
            }),
            fileName + '.xls',
          )
        } else {
          let url = window.URL.createObjectURL(
            new Blob([data], {
              type: 'application/vnd.ms-excel',
            }),
          )
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName + '.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link) //下载完成移除元素
          window.URL.revokeObjectURL(url) //释放掉blob对象
        }
      })
    },
  },
}
</script>
<style lang="less">
.ant-time-picker-panel-inner {
  background-color: #045053 !important;
}
.ant-time-picker-panel-select li {
  color: #07a9bf;
  background-color: #045053;
}

.ant-time-picker-panel-select-option-active {
  color: #034953 !important;
  // background: #0f8491 !important;
}
.ant-time-picker-panel-select > ul,
.ant-time-picker-panel-select > li {
  width: 100%;
}

.ant-time-picker-panel-select-option-selected {
  color: #034953 !important;
  background: #0f8491 !important;
}

.ant-time-picker-panel-select > ul > li:hover {
  color: #034953 !important;
  background: #0f8491 !important;
}

.ant-time-picker-panel-input-wrap {
  border-bottom-color: #04dce8;
}

.ant-time-picker-panel-input {
  background: #045053;
  border-radius: 0.04rem;
  border: 1px solid #036265;
  color: #04dce8;
}
</style>
<style lang="less" scoped>
/deep/ .ant-time-picker {
  height: 40px;
  line-height: 40px;
  border-radius: 4px;
  border: 1px solid #096370;

  .ant-time-picker-input {
    height: 40px;
    font-size: 0.14rem;
    background: #045053;
    border-radius: 0.04rem;
    border: 1px solid #036265;
    color: #04dce8;
  }

  .ant-time-picker-clock-icon {
    color: #04dce8;
  }
}

// /deep/ .ant-time-picker-panel-select {
//   background: #045053;
//   border-radius: 0.04rem;
//   border: 1px solid #036265;
//   color: #04dce8;
// }

.exp {
  margin-left: 0.1rem;
  width: 0.7rem;
  background: #045053;
  border: 1px solid #017f82;
  font-size: 0.14rem;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #00f8ff;
}

.popover {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  transform: translateY(5%);
  width: 3.2rem;
  background: #076063;
  border: 1px solid #047578;
}
</style>
